<template>
  <div>
    <a-row>
      <a-card  style="width: 1200px">
        <a-col :span="24">
          <a-row>
            <a-col :span="24">
              <a-form layout="horizontal">
                <a-form-item label="评估时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                  <range-date @change="handleDateChange" style="width: 50%" ref="createTime"></range-date>
                  <a-button style="margin-left: 8px" type="primary" @click="search">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-card>
                <apexchart
                  type="line"
                  height="500"
                  width="100%"
                  :options="chartOptions"
                  :series="series"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-card>
    </a-row>
  </div>
</template>
<script>
import RangeDate from "@/components/datetime/RangeDate";
import { mapState } from "vuex";
import moment from "moment";

moment.locale("zh-cn");
const fakeDataUrl =
  "https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo";
export default {
  name: "InfoCompare",
  components: { RangeDate },
  data() {
    let self = this;
    return {
      queryParams: {},
      series: [
        {
          name: "监管分数",
          data: []
        },
        {
          name: "自查分数",
          data: []
        }
      ],
      chartOptions: {
        chart: {
          height: 350,
          zoom: {
            enabled: false
          }
        },
        tooltip: {
          intersect: true,
          shared: false
        },
        markers: {},
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "straight"
        },
        title: {
          text: "安全生产监督检查信息趋势对比图",
          align: "center"
        },
        grid: {
          row: {
            colors: [
              "#99ccff",
              "#99ccff",
              "#ffff99",
              "#ffff99",
              "#cc0000",
              "#cc0000",
              "#cc0000",
              "#cc0000",
              "#cc0000",
              "#cc0000"
            ], // takes an array which will be repeated on columns
            opacity: 0.3
          }
        },
        xaxis: {
          categories: []
        },
        yaxis: {
          categories: [
            "0",
            "10",
            "20",
            "30",
            "40",
            "50",
            "60",
            "70",
            "80",
            "90",
            "100"
          ],
          min: 0,
          max: 100,
          tickAmount: 10
        }
      },
      records: [],
      time: [],
      reportData: [],
      recordData: []
    };
  },
  beforeMount() {
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    start = this.$dateUtil.dateFtt(this.$dateUtil.dateStr(start), "yyyy-MM-dd");
    end = this.$dateUtil.dateFtt(this.$dateUtil.dateStr(end), "yyyy-MM-dd");
    this.queryParams.createTimeFrom = start;
    this.queryParams.createTimeTo = end;
    let startStr = "moment(" + start + ",'YYYY-MM-DD')";
    let endStr = "moment(" + end + ",'YYYY-MM-DD')";
    this.time.push(startStr);
    this.time.push(endStr);
  },
  methods: {
    moment,
    handleDateChange(value) {
      if (value) {
        this.queryParams.createTimeFrom = value[0];
        this.queryParams.createTimeTo = value[1];
      }
    },
    search() {
      let that = this;
      let company = this.$db.get("COMPANY");
      let user = this.$db.get("USER");
      this.queryParams.companyId = company.value;
      that.chartOptions.xaxis.categories = [];
      this.$get("report", {
        ...this.queryParams
      }).then(r => {
        that.reportData = r.data.rows;
        that.series[0].data = [];
        that.reportData.forEach(report => {
          that.series[0].data.push(report.reportScore);
          that.chartOptions.xaxis.categories.push(report.createTime);
        });
      });
    },
    reset() {
      // 重置查询参数
      this.queryParams = {};
      // 清空时间选择
      this.$refs.createTime.reset();
    }
  },
  mounted() {
    let that = this;
    let params = {};
    let user = this.$db.get("USER");
    let company = this.$db.get("COMPANY");
    params.companyId = company.value;
//    params.officeId = user.officeId == undefined ? null : user.officeId;
    this.$get("report", {
      ...params
    }).then(r => {
      that.reportData = r.data.rows;
      that.reportData.forEach(report => {
        if(report.reportSelf == '0'){
            that.series[0].data.push(report.reportScore);
        }
        if(report.reportSelf == '1'){
            that.series[1].data.push(report.reportScore);
        }
        that.chartOptions.xaxis.categories.push(report.createTime);
      });
    });
  }
};
</script>
<style lang="less">
</style>
